class Page
{
    constructor(el,options = {})
    {
        this.el = document.querySelector(el) 
        this.options = options
        this.init()
    }

    init() 
    {
        // 动作步骤：
        // 1、给父元素【即最大的div盒模型】加样式
        this.parentTagStyle() 

        // 2、创建分页标签【即 首页/上一页/下一页/末页】、分页页码【即 1/2/3/4/...】
            // 2.1 创建分页标签【即 首页/上一页/下一页/末页】
            this.createTag()
            // 2.2 分页页码【即 1/2/3/4/...】
            this.createNum()

        // 3、给父元素【即最大的div盒模型】绑定点击事件
        this.bindEvent()
        // 思考：是给最大的div盒子绑定点击事件，还是里面的标签或者页码绑定？
        // 回答：是给盒子绑定，因为标签和页码是追加的，需要用事件委托，给祖先绑定点击事件
    }

    // 1、给父元素【即最大的div盒模型】加样式
    parentTagStyle() 
    {
        this.el.style.display = 'flex'
        this.el.style.justifyContent = 'center'
        this.el.style.alignItems = 'center'
    }

    createLabel(LabelName,content,fatherObj){
        // 创建标签（此时分页需要创建p标签）、增加属性、追加到父标签对象中
            // 创建标签
            let pObj = document.createElement(LabelName)
            // 更改属性内容
            pObj.innerText = content
            pObj.style.border = '1px solid black'
            // 让 ... 的边框消失
            if(pObj.innerText == '...') pObj.style.border = 'none'
            pObj.style.margin = '0 5px'
            pObj.style.padding = '0 5px'
            pObj.style.display = 'inline-block'     // 保证p标签在同一行显示
            pObj.style.cursor = 'pointer'
            pObj.style.userSelect = 'none'
            // 默认页码选中 => 思路：当前页pageNum === p标签里面的数据content 时，选中（即更改该标签的背景颜色）
            if(this.options.pageInfo.pageNum === content) pObj.style.backgroundColor = 'springgreen'
            // 追加
            fatherObj.appendChild(pObj)
    }

    // 2、创建分页标签【即 首页/上一页/下一页/末页】、分页页码【即 1/2/3/4/...】
        // 2.1 创建分页标签【即 首页/上一页/下一页/末页】
        createTag() 
        {
            // 步骤：
            // （1）清空之前的布局
            this.el.innerHTML = ''
            // （2）获取构造函数中的第二个实参中的pageTag这个键的值，这个值是一个对象，需要进行遍历，对象遍历用forin
            for(let key in this.options.pageTag){
                // （3）遍历后创建p标签，并添加相应属性【将对象键的值分别赋给p标签，border:1px solid black; margin:0 5px; padding:0 5px; display:inline-block;】
                this.createLabel('p',this.options.pageTag[key],this.el)
            }
            // （4）当在第一页时，首页和上一页显示禁用图标
            let pObjs = this.el.querySelectorAll('p')
            if(this.options.pageInfo.pageNum == 1) {
                pObjs[0].style.cursor = 'not-allowed'
                pObjs[1].style.cursor = 'not-allowed'
            }
            // （5）当在最后一页时，末页和下一页显示禁用图标
            if(this.options.pageInfo.pageNum == this.options.pageInfo.totalPage) {
                pObjs[3].style.cursor = 'not-allowed'
                pObjs[4].style.cursor = 'not-allowed'
            }
        }

    // 2、创建分页标签【即 首页/上一页/下一页/末页】、分页页码【即 1/2/3/4/...】
        // 2.2 分页页码【即 1/2/3/4/...】
        createNum() 
        {
            // 步骤：
            // （1）获取第三个分页标签
            let pTag3Obj = this.el.querySelector('p:nth-of-type(3)')
            // 注：去掉原来第三个分页标签的边框、内边距、外边距
            pTag3Obj.style.border = 'none'
            pTag3Obj.style.margin = '0px'
            pTag3Obj.style.padding = '0px'
            // （2）循环增加p标签，并增加属性，追加到第三个分页标签中
            // for(let i = 1 ; i < 6 ; i++ ){
            //     this.createLabel('p',i,pTag3Obj)
            // }

            // ☆☆☆页码算法
            /**
             * 1 2 3 4 5 ... 99 100              pageNum < 5 
             * 1 2 3 4 5 6 7 ... 99 100          pageNum == 5 
             * 1 2 ... 4 5 6 7 8 ... 99 100      pageNum > 5 && pageNum < 总页数-4
             * 1 2 ... 96 97 98 99 100           pageNum >= 总页数-4
             */
            // （2）循环增加p标签，并增加属性，追加到第三个分页标签中
            let pageNum = this.options.pageInfo.pageNum
            // 工作中只有总条数，没有总页数，总页数需要计算
            // 总页数 = 向上取整(总条数/每页显示条数)
            this.options.pageInfo.totalPage = Math.ceil(this.options.pageInfo.totalData / this.options.pageInfo.pageSize)
            let totalPage = this.options.pageInfo.totalPage
            
            // 总页数小于等于7时，显示所有页面，中间没有 ... 这个符号
            if(totalPage<=7){
                for(let i = 1 ; i<=totalPage ; i++)  this.createLabel('p',i,pTag3Obj)
            } 
            else if(pageNum<5){
                // this.createLabel('p',1,pTag3Obj)
                // this.createLabel('p',2,pTag3Obj)
                // this.createLabel('p',3,pTag3Obj)
                // this.createLabel('p',4,pTag3Obj)
                // this.createLabel('p',5,pTag3Obj)
                for(let i = 1 ; i<=5 ; i++)  this.createLabel('p',i,pTag3Obj)
                this.createLabel('p','...',pTag3Obj)
                // this.createLabel('p',totalPage-1,pTag3Obj)
                // this.createLabel('p',totalPage,pTag3Obj)
                for(let i = totalPage-1 ; i<=totalPage ; i++) this.createLabel('p',i,pTag3Obj)
            } 
            else if(pageNum==5){
                // this.createLabel('p',1,pTag3Obj)
                // this.createLabel('p',2,pTag3Obj)
                // this.createLabel('p',3,pTag3Obj)
                // this.createLabel('p',4,pTag3Obj)
                // this.createLabel('p',5,pTag3Obj)
                // this.createLabel('p',6,pTag3Obj)
                // this.createLabel('p',7,pTag3Obj)
                for(let i = 1 ; i<=7 ; i++) this.createLabel('p',i,pTag3Obj)
                this.createLabel('p','...',pTag3Obj)
                // this.createLabel('p',totalPage-1,pTag3Obj)
                // this.createLabel('p',totalPage,pTag3Obj)
                for(let i = totalPage-1 ; i<=totalPage ; i++) this.createLabel('p',i,pTag3Obj)
            } 
            else if(pageNum>5 && pageNum<totalPage-4){
                // this.createLabel('p',1,pTag3Obj)
                // this.createLabel('p',2,pTag3Obj)
                for(let i = 1 ; i<=2 ; i++) this.createLabel('p',i,pTag3Obj)
                this.createLabel('p','...',pTag3Obj)
                // this.createLabel('p',pageNum-2,pTag3Obj)
                // this.createLabel('p',pageNum-1,pTag3Obj)
                // this.createLabel('p',pageNum,pTag3Obj)
                // this.createLabel('p',pageNum+1,pTag3Obj)
                // this.createLabel('p',pageNum+2,pTag3Obj)
                for(let i = pageNum-2 ; i<=pageNum+2 ; i++) this.createLabel('p',i,pTag3Obj)
                this.createLabel('p','...',pTag3Obj)
                // this.createLabel('p',totalPage-1,pTag3Obj)
                // this.createLabel('p',totalPage,pTag3Obj)
                for(let i = totalPage-1 ; i<=totalPage ; i++) this.createLabel('p',i,pTag3Obj)
            } 
            else if(pageNum>=totalPage-4){
                // this.createLabel('p',1,pTag3Obj)
                // this.createLabel('p',2,pTag3Obj)
                for(let i = 1 ; i<=2 ; i++) this.createLabel('p',i,pTag3Obj)
                this.createLabel('p','...',pTag3Obj)
                // this.createLabel('p',totalPage-4,pTag3Obj)
                // this.createLabel('p',totalPage-3,pTag3Obj)
                // this.createLabel('p',totalPage-2,pTag3Obj)
                // this.createLabel('p',totalPage-1,pTag3Obj)
                // this.createLabel('p',totalPage,pTag3Obj)
                for(let i = totalPage-4 ; i<=totalPage ; i++) this.createLabel('p',i,pTag3Obj)
            } 
        }

    // 3、给父元素【即最大的div盒模型】绑定点击事件
    bindEvent()
    {
        // 步骤：
        // （1）获取当前盒模型，绑定点击事件
        this.el.onclick = (evt) => {
            // （2）事件处理函数中---获取事件对象
            let e = evt || window.event
            // （3）事件处理函数中---判断当前操作标签是否为p标签
            let target = e.target || e.srcElement
            // console.log(target.nodeName);
            if(target.nodeName === 'P'){
                // （4）事件处理函数中---操作的是p标签则更新当前页，并且重新创建分页标签和页码【注意更新之前需要清空之前的布局，这个可以在创建分页标签的时候加】
                    // (4.1)target.innerText === 首页/first【即this.options.pageTag.first】时，当前页跳转为1，并且重新创建分页标签和页码
                    // (4.2)target.innerText === 上一页/prev【即this.options.pageTag.prev】时，当前页跳转为pageNum-1，并且重新创建分页标签和页码
                    // (4.3)target.innerText === 下一页/next【即this.options.pageTag.next】时，当前页跳转为pageNum+1，并且重新创建分页标签和页码
                    // (4.3)target.innerText === 末页/last【即this.options.pageTag.last】时，当前页跳转为totalPage，并且重新创建分页标签和页码
                    // (4.4)target.innerText === 某页数【即this.options.pageTag.pageNum】时，当前页跳转为totalPage，并且重新创建分页标签和页码
                    // (4.5)target.innerText === ...  不管
                    // (4.6)target.innerText === 数字  当前页跳转为当前操作的数字【即target.innerText】，并且重新创建分页标签和页码
                    // (4.7)target.innerText === 第三个分页p标签  不管
                    switch (target.innerText) {
                        case this.options.pageTag.first:
                            this.options.pageInfo.pageNum = 1
                            // this.createTag() 
                            // this.createNum() 
                            break;

                        case this.options.pageTag.prev:
                            // 留心1：最少是第一页
                            // 留心2：从页面获取的数据类型都是字符串，所以为了安全起见，还是得转换成Number数值型
                            if(this.options.pageInfo.pageNum > 1){
                                this.options.pageInfo.pageNum = parseInt(this.options.pageInfo.pageNum)-1
                                // this.createTag() 
                                // this.createNum() 
                            }
                            break;

                        case this.options.pageTag.next:
                            // 留心1：最大是最后一页
                            // 留心2：从页面获取的数据类型都是字符串，所以为了安全起见，还是得转换成Number数值型
                            if(this.options.pageInfo.pageNum < this.options.pageInfo.totalPage){
                                this.options.pageInfo.pageNum = parseInt(this.options.pageInfo.pageNum)+1
                                // this.createTag() 
                                // this.createNum() 
                            }
                            break;

                        case this.options.pageTag.last:
                            this.options.pageInfo.pageNum = parseInt(this.options.pageInfo.totalPage)
                            // this.createTag() 
                            // this.createNum() 
                            break;   
                    
                        default:
                            // ...                  innerText: ...              =>     parseInt: NaN    ;     innerHTML: ...               =>       parseInt: NaN
                            // 数字                 innerText: 字符串类型的数字   =>     parseInt: 数字    ;    innerHTML: 字符串类型的数字    =>       parseInt: 数字
                            // 第三个分页p标签       innerText: 一堆数字          =>     parseInt: 数字    ;    innerHTML: 字符串+数字         =>       parseInt: NaN
                            // 判断 target.innerHTML > 0 是为了看是不是纯数字，如果是NaN的话就不是纯数字，就不执行代码；如果大于0成立的话就是纯数字，就执行代码
                            if(parseInt(target.innerHTML) > 0){
                                this.options.pageInfo.pageNum = parseInt(target.innerHTML)
                            }
                            break;
                    }
                    // 重新创建分页标签和页码【注意更新之前需要清空之前的布局，这个可以在创建分页标签的时候加】为了减少上面的代码冗余，所以直接等判断做完再写
                    this.createTag() 
                    this.createNum() 
            }
        }
    }

}